import React, { useState, useEffect } from "react";
import { Layout, message } from "antd";
import JobSearch from "./job/search";
import JobList from "./job/jobList";
import MyProfile from "./job/my";
import { getjobListApi } from "../../api/recruiter"; // 引入获取岗位列表的 API
import "../../assets/style/App.css";

const { Content, Sider } = Layout;

const JobSeekerFront = () => {
  const [jobs, setJobs] = useState([]); // 存储岗位列表
  const [filteredJobs, setFilteredJobs] = useState([]); // 存储过滤后的岗位列表
  const [filters, setFilters] = useState({
    job_name: "",
    money: 0,
    place: "",
    industry: "",
  }); // 筛选条件状态

  // 获取岗位列表数据
  useEffect(() => {
    const fetchJobs = async () => {
      try {
        const response = await getjobListApi(); // 调用 API 获取岗位列表
        const sortedJobs = response.sort(
          (a, b) => new Date(b.created_at) - new Date(a.created_at)
        );
        setJobs(sortedJobs); // 设置岗位列表
        setFilteredJobs(sortedJobs); // 初始化过滤后的岗位列表
      } catch (err) {
        message.error("获取岗位列表失败:", err);
      }
    };

    fetchJobs();
  }, []);

  // 实时过滤逻辑
  const handleSearch = (searchTerm) => {
    if (!searchTerm) {
      setFilteredJobs(jobs); // 恢复原始数据
    } else {
      const filtered = jobs.filter(
        (job) =>
          job.job_name.includes(searchTerm) || job.company.includes(searchTerm)
      );
      setFilteredJobs(filtered);
    }
  };

  return (
    <Layout
      style={{
        maxWidth: "1400px",
        margin: "0 auto",
        height: "89vh", // 父容器高度占满屏幕
        background: "#f5f5f5", // 背景颜色
      }}
    >
      {/* 左侧内容 */}
      <Content
        style={{
          flex: 3,
          padding: "20px",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <JobSearch
          onSearch={handleSearch}
          filters={filters}
          setFilters={setFilters}
        />
        <div
          style={{
            marginTop: "20px",
            flex: 1,
            overflowY: "auto", // 启用内部滚动
            paddingRight: "10px", // 防止内容贴边
          }}
          className="scroll-container"
        >
          <JobList jobs={filteredJobs} />
        </div>
      </Content>

      {/* 右侧个人模块 */}
      <Sider
        width={400}
        style={{
          background: "transparent",
          padding: "20px",
          marginTop: "50px",
          overflow: "hidden",
        }}
      >
        <MyProfile />
      </Sider>
    </Layout>
  );
};

export default JobSeekerFront;
